<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5.3.1-如何代理 Object</title>
</head>

<body>
    <div id="container"></div>
</body>
<script>
    /**
     * “读取”是一个很宽泛的概念
     * 对一个普通对象的所有可能的读取操作
     * - 访问属性：obj.foo
     * - 判断对象或原型上是否存在给定的 key：key in obj
     * - 使用 for...in 循环遍历对象：for (const key in obj){}
     * 
     * 
     * 首先是对于属性的读取，
     * - 例如 obj.foo，我们知道这可以通过 get 拦截函数实现
     * */

    const obj = { foo: 1 }

    const p = new Proxy(obj, {
        get(target, key, receiver) {
            // 建立联系
            track(target, key)
            // 返回属性值
            return Reflect.get(target, key, receiver)
        },
    })
</script>

</html>